<template>
  <div>
    <el-card class="box">
      <!-- 顶部 -->

      <div class="title">
        <el-button type="primary" @click="edBtn(0)">添加房产 </el-button>

        <div class="rightBTN">
          <el-button style="margin-left: 0px">
            <el-dropdown>
              <span class="el-dropdown-link">
                全部分类<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item

                  v-for="item in classlist "
                  :key="item.id"
                  @click.native="ceshi(item)"
                >{{ item }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button>
          <el-button style="margin-left: 0px">
            <el-dropdown>
              <span class="el-dropdown-link">
                全部经纪<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in classlist "
                  :key="item"
                  @click.native="ceshi(item)"
                >{{ item }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button>

          <el-input v-model="jklist.title_contains" placeholder="请输入关键字" class="shurukang" />
          <!-- <el-input v-model="key" placeholder="请输入关键字" class="shurukang" /> -->
          <el-button @click="search(3)">搜索</el-button>
        </div>
      </div>
      <hr>
      <!-- 顶部 -->
      <el-table :data="hList" border>
        <el-table-column label="封面">
          <template #default="{ row }">
            <img :src="row.image" class="staffPhoto">
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" />
        <el-table-column label="标签" prop="tags">
          <template #default="{row}">
            <el-button
              v-for="item in row.tags "
              :key="item"
              type="success"
              class="tag"
              prop="tags"
              size="mini"
              plain
              disabled
            >  {{ item }}  </el-button>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" />
        <el-table-column label="分类" prop="category.id" />
        <el-table-column label="经纪" prop="content" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="图片">
          <template #default="{ row } ">
            <span
              v-for="item in row.photos "
              :key="item.id"
            >      <img
              :src="item"
              class="staffPhotoMini"
            >
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row } ">
            <el-button size="small" type="primary" @click="edBtn(row.id)">  编辑</el-button>
            <el-button size="small" type="danger" @click="delBtn(row.id)">  删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row />

      <el-pagination
        :total="totals"
        layout="prev, pager, next"
        :page-size=" jklist._limit"
        align="middle"
        @current-change="currentChange"
      />

    </el-card>
    <!-- 弹窗 -->
    <el-dialog style="height:920px;margin-top:1px;" :visible.sync="dialogFormVisible" @close="cancelBtn">

      <el-form :model="tcList" class="shuRuKuang">
        <el-form-item label="经纪">
          <el-select v-model="tcList.agent" label="经纪">

            <el-option label="" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="分类">

          <el-input v-model="tcList.id" />
        </el-form-item>
        <el-form-item label="标题" required>
          <el-input v-model="tcList.title" :rules="rules" prop="name" />
        </el-form-item>
        <el-form-item label="标签">
          <el-button
            v-for="item in tcList.tags "
            :key="item"
            size="medium "
            type="primary"

            plain
            @click="DelTag(item)"
          >  {{ item }}  <i class="el-icon-close" />
          </el-button>
          <el-button plain size="medium" @click="addTag()">
            新标签
            <i class="el-icon-plus" />
          </el-button>
        </el-form-item>

        <el-form-item label="地址">

          <div class="addressIpu">
            <el-select v-model="tcList.address" style="width:150px" placeholder="选择区域" label="123">
              <el-option
                v-for="item in dizhi "
                :key="item"
                :value="item"
              />
            </el-select>

            <el-input v-model="tcList.address" />
          </div>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="tcList.price" />
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="tcList.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="tcList.content" />
        </el-form-item>

        <el-form-item label="介绍图片">
          <div class="df">   <upPic ref="picData1" @nullPic="picDele1(1)" @picUrl="urlUp1" />
            <upPic ref="picData2" @nullPic="picDele1(2)" @picUrl="urlUp2" />
          </div>

        </el-form-item>
        <el-form-item label="封面">
          <upPic
            ref="picData"
            @nullPic="picDele1(0)"
            @picUrl="urlUp"
          />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBtn ">取 消</el-button>
        <el-button type="primary" @click="OkBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 弹窗 -->

    <!-- 新标签弹窗 -->
    <addTags ref="newtag" @newtags="tagdata">asd</addTags>
  </div>
</template>

<script>

import upPic from '@/components/upPic/index.vue'
import { deltHouselist, editHouselist, fenyeList, getHouselist, numList, upHouselist } from '@/api/constant/house-api'
import AddTags from './addTags.vue'

export default {

  components: { upPic, AddTags },
  data() {
    return {
      hList: [],

      totals: 10,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      classlist: '',
      classlist2: '',
      tcList: { photos: [], tags: [] },
      dizhi: ['地球', '火星', '月球', '金星'],
      isCloned: false,
      dialogFormVisible: false,
      jklist: {
        _limit: 10,
        _start: 0,
        title_contains: ''

      },
      desc: '',
      address: '',
      rules: {
        name: [{ required: true, message: '标题', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }]

      },
      add_up: false
    }
  },

  created() {
    this.houseList()
  },
  methods: {
    urlUp1(url) {
      this.tcList.photos[0] = url
    },
    urlUp2(url) {
      this.tcList.photos[1] = url
    },

    // 封面上传
    urlUp(url) {
      this.tcList.image = url
    },
    // 删除图片函数
    picDele1(key) {
      console.log(key)
      if (key === 1) {
        this.tcList.photos[0] = ''
      }
      if (key === 0) {
        this.tcList.image = ''
      }
      if (key === 2) {
        this.tcList.photos[1] = ''
      }
    },
    // 切换页面
    async currentChange(newPage) {
      this.jklist._start = newPage

      this.hList = await fenyeList(this.jklist)
    },
    async ceshi(data) {
      this.jklist.title_contains = data
      this.search()
    },

    // 筛选搜索
    async search() {
      this.hList = await fenyeList(this.jklist)

      this.jklist.title_contains = ''
    },

    tagdata(newtag) {
      console.log(newtag)
      this.tcList.tags.push(newtag)
    },
    addTag() {
      this.dialogFormVisibleER = true
      this.$refs.newtag.dialogFormVisibleER = true
      console.log(this.$refs.newtag.dialogFormVisibleER)
    },
    DelTag(tag) {
      this.tcList.tags = this.tcList.tags.filter(item => item !== tag

      )
    },

    // 初始化渲染页面
    async houseList() {
      this.totals = await numList()

      this.hList = await fenyeList(this.jklist)
      console.log(this.hList, 295)

      const d2 = this.hList.filter(item => item.title !== null).map(item => item.title)
      console.log(d2, 311)

      // 去重函数
      function unique(arr) {
        return Array.from(new Set(arr))
      }

      this.classlist = unique(d2)
    },

    // 编辑按钮
    async  edBtn(data) {
      this.add_up = false
      this.dialogFormVisible = true
      if (data !== 0) {
        this.add_up = true
        const res = await getHouselist(data)

        this.$nextTick(() => {
          if (res.photos.length >= 1) {
            this.$refs.picData1.fileList = [{ url: res.photos[0] }]
            this.$refs.picData2.fileList = [{ url: res.photos[1] }]
          }
          if (res.image.url === null || res.image.url === '') {
            return
          }
          this.$refs.picData.fileList = [{ url: res.image }]
          this.tcList = res
        })
      }
    },

    // 确定上传数据
    async OkBtn() {
      const id = this.tcList.id

      if (this.add_up) {
        console.log('编辑')
        await editHouselist(id, this.tcList)
      } else {
        console.log('添加')
        await upHouselist(this.tcList)
      }

      this.tcList.id = ''

      this.houseList()
      this.dialogFormVisible = false
    },

    cancelBtn() {
      this.dialogFormVisible = false
      this.tcList = {}
      this.$refs.picData.fileList = []
      this.$refs.picData1.fileList = []
      this.$refs.picData2.fileList = []
    },
    // 删除row
    async  delBtn(id) {
      try {
        await this.$confirm('确定删除')

        await deltHouselist(id)
        this.houseList()
      } catch (err) {
        console.log(err)
      }
    }

  }
}
</script>

<style lang="scss"   scoped>

.df{

  display: flex;
}
::v-deep.el-dialog{

 padding-top: 4px;
 margin-top: 20px;
}
::v-deep.el-dialog__body{

 padding:0 22px;

}
::v-deep.el-dialog__footer{
margin-top: 0;
}
::v-deep.el-upload{
  width: 80px;
  height: 80px;
  line-height: 100px;
  font-size: 16px;
}
.addressIpu{
display: flex;
}
.addressInpt{

  height: 0px;

  background-color: #0a0;
  display: flex;

}
.actoveBtn{

  background-color: #0a0;
}

.active{

  background-color: red;
}
.staffPhotoMini{

  width: 80px;
  height: 80px;
}
.tag{

margin: 5px;

}
hr {
  border: 1px solid rgb(232, 232, 232);
}
.box {
  margin: 20px;
  padding: 10px;
}
.rightBTN {
  display: flex;
}
.shurukang {
  width: 300px;
}

.title {
  display: flex;

  justify-content: space-between;
}
.staffPhoto{

  height: 100px;
}
.cover{
  ::v-deep.el-upload--picture-card {
    display: none;
  }
}

</style>>

